(function (window, document) {
    let rootElement = document.documentElement;
    let colorSchemaStorageKey = 'Fluid_Color_Scheme';
    let colorSchemaMediaQueryKey = '--color-mode';
    let userColorSchemaAttributeName = 'data-user-color-scheme';
    let defaultColorSchemaAttributeName = 'data-default-color-scheme';
    let colorToggleButtonSelector = '#color-toggle-btn';
    let colorToggleIconSelector = '#color-toggle-icon';

    function setLS(k, v) {
        try {
            localStorage.setItem(k, v);
        } catch (e) {}
    }

    function removeLS(k) {
        try {
            localStorage.removeItem(k);
        } catch (e) {}
    }

    function getLS(k) {
        try {
            return localStorage.getItem(k);
        } catch (e) {
            return null;
        }
    }

    function getSchemaFromHTML() {
        let res = rootElement.getAttribute(defaultColorSchemaAttributeName);
        if (typeof res === 'string') {
            return res.replace(/["'\s]/g, '');
        }
        return null;
    }

    function getSchemaFromCSSMediaQuery() {
        let res = getComputedStyle(rootElement).getPropertyValue(
            colorSchemaMediaQueryKey
        );
        if (typeof res === 'string') {
            return res.replace(/["'\s]/g, '');
        }
        return null;
    }

    function resetSchemaAttributeAndLS() {
        rootElement.setAttribute(userColorSchemaAttributeName, getDefaultColorSchema());
        removeLS(colorSchemaStorageKey);
    }

    let validColorSchemaKeys = {
        dark: true,
        light: true
    };

    function getDefaultColorSchema() {
        // 取默认字段的值
        let schema = getSchemaFromHTML();
        // 如果明确指定了 schema 则返回
        if (validColorSchemaKeys[schema]) {
            return schema;
        }
        // 默认优先按 prefers-color-scheme
        schema = getSchemaFromCSSMediaQuery();
        if (validColorSchemaKeys[schema]) {
            return schema;
        }
        // 否则按本地时间是否大于 18 点或凌晨 0 ~ 6 点
        let hours = new Date().getHours();
        if (hours >= 18 || (hours >= 0 && hours <= 6)) {
            return 'dark';
        }
        return 'light';
    }

    function applyCustomColorSchemaSettings(schema) {
        // 接受从「开关」处传来的模式，或者从 localStorage 读取，否则按默认设置值
        let current = schema || getLS(colorSchemaStorageKey) || getDefaultColorSchema();

        if (current === getDefaultColorSchema()) {
            // 当用户切换的显示模式和默认模式相同时，则恢复为自动模式
            resetSchemaAttributeAndLS();
        } else if (validColorSchemaKeys[current]) {
            rootElement.setAttribute(
                userColorSchemaAttributeName,
                current
            );
        } else {
            // 特殊情况重置
            resetSchemaAttributeAndLS();
            return;
        }

        // 根据当前模式设置图标
        setButtonIcon(current);

        // 设置其他应用
        setApplications(current);
    }

    let invertColorSchemaObj = {
        dark: 'light',
        light: 'dark'
    };

    function getIconClass(scheme) {
        return 'icon-' + scheme;
    }

    function toggleCustomColorSchema() {
        let currentSetting = getLS(colorSchemaStorageKey);

        if (validColorSchemaKeys[currentSetting]) {
            // 从 localStorage 中读取模式，并取相反的模式
            currentSetting = invertColorSchemaObj[currentSetting];
        } else if (currentSetting === null) {
            // 当 localStorage 中没有相关值，或者 localStorage 抛了 Error
            // 先按照按钮的状态进行切换
            let iconElement = document.querySelector(colorToggleIconSelector);
            if (iconElement) {
                currentSetting = iconElement.getAttribute('data');
            }
            if (!iconElement || !validColorSchemaKeys[currentSetting]) {
                // 当 localStorage 中没有相关值，或者 localStorage 抛了 Error，则读取默认值并切换到相反的模式
                currentSetting = invertColorSchemaObj[getSchemaFromCSSMediaQuery()];
            }
        } else {
            return;
        }
        // 将相反的模式写入 localStorage
        setLS(colorSchemaStorageKey, currentSetting);

        return currentSetting;
    }

    function setButtonIcon(schema) {
        if (validColorSchemaKeys[schema]) {
            // 切换图标
            let icon = getIconClass('dark');
            if (schema) {
                icon = getIconClass(schema);
            }
            let iconElement = document.querySelector(colorToggleIconSelector);
            if (iconElement) {
                iconElement.setAttribute(
                    'class',
                    'iconfont ' + icon
                );
                iconElement.setAttribute(
                    'data',
                    invertColorSchemaObj[schema]
                );
            } else {
                // 如果图标不存在则说明图标还没加载出来，等到页面全部加载再尝试切换
                Fluid.utils.waitElementLoaded(colorToggleIconSelector, function () {
                    let iconElement = document.querySelector(colorToggleIconSelector);
                    if (iconElement) {
                        iconElement.setAttribute(
                            'class',
                            'iconfont ' + icon
                        );
                        iconElement.setAttribute(
                            'data',
                            invertColorSchemaObj[schema]
                        );
                    }
                });
            }
        }
    }

    function setApplications(schema) {
        // 设置 remark42 评论主题
        if (window.REMARK42) {
            window.REMARK42.changeTheme(schema);
        }

        // 设置 cusdis 评论主题
        if (window.CUSDIS) {
            window.CUSDIS.setTheme(schema);
        }

        // 设置 utterances 评论主题
        let utterances = document.querySelector('iframe');
        if (utterances) {
            let theme = window.UtterancesThemeLight;
            if (schema === 'dark') {
                theme = window.UtterancesThemeDark;
            }
            const message = {
                type: 'set-theme',
                theme: theme
            };
            utterances.contentWindow.postMessage(message, 'https://utteranc.es');
        }
    }

    // 当页面加载时，将显示模式设置为 localStorage 中自定义的值（如果有的话）
    applyCustomColorSchemaSettings();

    Fluid.utils.waitElementLoaded(colorToggleIconSelector, function () {
        applyCustomColorSchemaSettings();
        let button = document.querySelector(colorToggleButtonSelector);
        if (button) {
            // 当用户点击切换按钮时，获得新的显示模式、写入 localStorage、并在页面上生效
            button.addEventListener('click', function () {
                applyCustomColorSchemaSettings(toggleCustomColorSchema());
            });
            let icon = document.querySelector(colorToggleIconSelector);
            if (icon) {
                // 光标悬停在按钮上时，切换图标
                button.addEventListener('mouseenter', function () {
                    let current = icon.getAttribute('data');
                    icon.classList.replace(getIconClass(invertColorSchemaObj[current]),
                        getIconClass(current));
                });
                button.addEventListener('mouseleave', function () {
                    let current = icon.getAttribute('data');
                    icon.classList.replace(getIconClass(current), getIconClass(invertColorSchemaObj[
                        current]));
                });
            }
        }
    });
})(window, document);